<!--
 * @Author: Sam
 * @Date: 2020-10-22 11:51:30
 * @LastEditTime: 2020-11-25 09:31:13
 * @LastEditors: Sam
 * @Description: 
 * @FilePath: \thework\ygboost-eui\src\components\app\edit\setting\packproduct\packproductPriceList.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix text-left">
        <span class="title-icon">最新价格表</span>
      </div>

      <div class="flex">
        <div style="width:15%;border-right:1px solid #ccc">
          <el-tree
            :data="tabsList"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
        <div style="width:85%;" class="padding-left">
          <TableComponent
            :tableData="queryProductPrice.tableData"
            :tableColumns="queryProductPrice.tableColumns"
            :priceCategorysMap="priceCategorysMap"
            :zonePlansMap="zonePlansMap"
          ></TableComponent>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import TableComponent from "./TableComponent";
import { ajax } from "@/store/yg/common/utils";
// import TabPane from "./TabPane";

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      tabsList: [
        { id: "2", label: "日本邮便" },
        { id: "3", label: "深圳EUB（普货）" },
        { id: "4", label: "美国小包经济" },
        { id: "5", label: "美国小包快线" },
        { id: "6", label: "外地EUB" },
        { id: "7", label: "卢森堡邮政" }
      ],
      activeName: "AEF",
      tabActiveName: "11",
      tableInfo: null,
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "leaf"
      },
      ChannelId: "",
      ChannelData: [],
      queryProductPrice: {},
      priceCategorysMap: {},
      zonePlansMap: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const { data: initData } = await ajax("intPackProductData", {});
      this.priceCategorysMap = initData.priceCategorysMap;
      this.zonePlansMap = initData.zonePlansMap;
      const data = await ajax("intQueryPriceFreeData", {});

      let packProductsMaps = data.data.packProductsMaps;
      let list = [];
      for (const key in packProductsMaps) {
        let obj = {
          id: key,
          label: packProductsMaps[key]
        };
        list.push(obj);
      }
      this.tabsList = list;
    },
    async handleNodeClick(data) {
      this.getTable(data.id);
    },
    shippingWayClick(tab) {
      this.init();
    },
    handleClick(tab) {
      this.getTable(parseInt(tab.name));
    },
    async getTable(PlaceId) {
      const tableInfo = await ajax("queryProductPriceById", {
        id: PlaceId
      });

      let tableColumns = [];
      let tableData = [];
      let cdate = "";
      for (const i of tableInfo.data) {
        let col = [];
        for (const j of i.zoneProductPrices) {
          let data = {};
          let columns = {};
          for (const k in j) {
            data.zonePlanId = j[0].zonePlanId;

            data[
              `${j[k].type}_${j[k].category}_${j[k].startWeight}_${j[k].endWeight}`
            ] = j[k].priceValue;
          }
          col.push(data);
        }
        console.log("col", col);
        tableData = [...col];
      }

      let arr = [];

      for (const j in tableData[0]) {
        console.log(j);
        if (j !== "zonePlanId") {
          arr.push({
            prop: j
          });
        }
      }
      console.log("tableData", tableData);
      console.log("arr", arr);
      this.queryProductPrice = {
        tableData: tableData,
        tableColumns: arr
      };
    }
  }
};
</script>

<style></style>
